<template>
<ul>
<!--  列表渲染-->
  <li v-for="item in searchList" :key="item.postsId">
<!--    作者头像、名字   +   删除按钮-->
    <div class="userInfo">
      <img :src="item.avatar" alt="">
      <span>{{item.userName}}</span>
      <span v-show="$store.state.userInfo.userId==item.userId" @click="del(item.postsId)" class="delate"><van-icon name="close" /></span>
    </div>
<!--   帖子图片和内容-->
    <router-link tag="div" :to="{path:'/nodeDetail',query:{postsId:item.postsId}}" class="content">
      <img :src="item.coverImgUrl" alt="">
      <span class="title">{{item.title}}:</span>
      <br>
      <span style="margin-left: 20px">{{item.intro}}</span>
      <br>
      <span class="sendTime">{{item.sendTime}}</span>
<!--      清除浮动-->
      <div style="clear: both"></div>
    </router-link>
  </li>
</ul>
</template>

<script>
import {delNode} from '../api/api'
import {Dialog} from 'vant'
export default {
  name: "Nodes",
  props:['searchList'],
  methods:{
    //删除帖子
    del(postId){
      Dialog.confirm({
        title: '确定删除该帖子么？',
      })
          .then(() => {
            // on confirm
            delNode(postId).then(res=> {
              if(res.code=='0'){
                window.history.go(0)
              }
            })
          })
          .catch(() => {
            // on cancel
          });
    },
  }
}
</script>

<style scoped lang="less">
li {
  padding: 0 10px 20px;
}
.userInfo {
  display: flex;
  align-items: center;
  position: relative;
  img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0 0 3px black;
  }
  span {
    font-size: 12px;
    color: gray;
    margin-left: 15px;
  }
  //删除
  .delate {
    position: absolute;
    right: 30px;
    font-size: 18px;
  }
}
.content {
  background-color: #c2f8ff;
  width: calc(100% - 80px);
  margin-left: 40px;
  padding: 5px;
  img {
    width: 100%;
  }
}
.sendTime {
  float: right;
  font-size: 13px;
  color: gray;
}
</style>